@extends('layouts.app')

@section('content')
    <section class="login" id="login">
        <div class="logo">
            <p><img src="{{asset('images/home.jpg')}}"/></p>
            <p>阿玛迪斯</p>
        </div>
        <form ref="form" action="{{url('/login')}}" method="post">
            {{ csrf_field() }}
            <div class="lofin_user">
                <p>
                    <i class="amds icon-user"></i>
                    <input type="tel" name="username" v-model="username" placeholder="用户名"/>
                </p>
            </div>
            <div class="lofin_pwd">
                <p>
                    <i class="amds icon-mima"></i>
                    <input type="password" name="password" v-model="password" placeholder="密码"/>
                </p>
            </div>
            <p class="forget_pwd fr">
                <a href="{{url('/forgot')}}">
                    <span class="gray">忘记密码</span>
                    <i class="amds icon-right-arrow"></i>
                </a>
            </p>
            <div class="clear"></div>
            <div class="btn-group" style="margin-top: 24px">
                <button type="button" @click="submit" class="btn btn-primary">登录</button>
                <a class="btn btn-outline" href="{{url('/register')}}">注册</a>
            </div>
        </form>
    </section>
@endsection
@section('script')
    <script>
        new Vue({
            el: "#login",
            data: function () {
                return {
                    username: "",
                    password: ""
                }
            },
            methods: {
                submit: function () {
                    var form = this.$refs.form;
                    console.log(form);
                    layer.load(2);
                    var data = $(form).serialize();
                    var url = form.action;
                    $.post(url, data, function (res) {
                        layer.closeAll();
                        var msg = res.msg;
                        layer.msg(msg);
                        if (res.code == 200) {

                        } else {

                        }
                    })
                }
            }
        })
    </script>
@endsection